<template>
  <div class="bg-white p-5">
    <div class="flex justify-between">
      <router-link to="/">
        <el-page-header content=""></el-page-header>
      </router-link>
      <el-button size="small" @click="clickEdit()" type="primary">新增</el-button>
    </div>
    <div class="my-5">
      <el-table :data="list">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="type" label="分类"></el-table-column>
        <el-table-column prop="url" label="地址"></el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="clickDel(scope.row)" type="text" size="small">删除</el-button>
            <el-button @click="clickEdit(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="text-center">
      <el-pagination
          class="mt-2"
          :background="true"
          :hide-on-single-page="true"
          layout="prev, pager, next"
          :current-page="params.page"
          :total="total"
          :page-size="per_page"
          @current-change="paginationChange">
      </el-pagination>
    </div>
    <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="60vh">
      <el-form ref="form" size="small" :model="form" label-width="45px">
        <el-form-item label="标题">
          <el-input type="text" placeholder="请输入标题" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select
              class="w-full"
              v-model="form.type"
              filterable
              allow-create
              default-first-option
              placeholder="请选择">
            <el-option
                v-for="(item, index) in []"
                :key="index"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址">
          <el-input type="text" placeholder="请输入地址" v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="开启">
          <el-switch @change="switchChange" v-model="status"></el-switch>
        </el-form-item>
        <el-form-item class="ml-2" label="排序">
          <el-input-number v-model="form.sort" :min="0" :max="100"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapActions, mapGetters} from "vuex";

export default {
  name: "tool",
  data() {
    return {
      list: [],
      params: {
        keyword: '',
      },
      current_page: 0,
      per_page: 0,
      total: 0,
      form: {
        id: '',
        title: "",
        type: '',
        url: '',
        sort: 0,
        status: 1,
      },
      status:true,
      dialogVisible: false,
      enumType:{},
    }
  },
  watch: {
    toolType:function (val){
      this.enumType = val.data;
    },
    toolListData: function (val) {
      this.list = val.data.data;
      this.per_page = val.data.per_page
      this.total = val.data.total
    },
    toolAddData: function () {
      this.$message({
        type: 'success',
        message: '保存成功!'
      });
      this.dialogVisible = false;
      this.toolList(this.params);
    },
    toolEditData: function () {
      this.$message({
        type: 'success',
        message: '保存成功!'
      });
      this.dialogVisible = false;
      this.toolList(this.params);
    },
    toolDelData: function () {
      this.$message({
        type: 'success',
        message: '删除成功!'
      });
      this.toolList(this.params);
    },
  },
  mounted() {
    this.toolType()
    this.toolList(this.params);
  },
  methods: {
    ...mapActions([
      'toolType',
      'toolView',
      'toolList',
      'toolAdd',
      'toolEdit',
      'toolDel'
    ]),
    switchChange(val) {
      this.form.status = val ? 1 : 0;
    },
    paginationChange(page) {
      this.params.page = page;
      this.toolList(this.params)
    },
    onSubmit() {
      if (this.form.id) {
        this.toolEdit(this.form);
      } else {
        this.toolAdd(this.form);
      }
    },
    clickEdit(item) {
      if (item && item.id) {
        this.form = item;
      } else {
        this.form = {
          id: '',
          title: "",
          type: '',
          url: '',
          sort: 0,
          status: 1,
        }
      }
      this.status = this.form.status === 1;
      this.dialogVisible = true;
    },
    clickDel(item) {
      this.$confirm("是否删除此文章（" + item.title + "）", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.toolDel({id: item.id});
      });
    },
  },
  computed: {
    ...mapGetters([
      'toolTypeData',
      'toolViewData',
      'toolListData',
      'toolAddData',
      'toolEditData',
      'toolDelData'
    ])
  }
}
</script>

<style scoped>

</style>